<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="月份：" prop="month">
        <DatePicker
          v-model="searchForm.month"
          placeholder="请选择月份"
          placement="bottom-end"
          style="width: 200px"
          type="month"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getAttendanceReportData()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <vxe-toolbar>
      <template v-slot:buttons>
        <Button type="primary" @click="exportDataEvent">导出</Button>
      </template>
    </vxe-toolbar>
    <vxe-grid
      ref="xTable1"
      :columns="tableColumn"
      :data="tableData"
      :loading="loading"
      :row-style="rowStyle"
      border
      height="600"
      show-overflow
      size="mini"
    ></vxe-grid>
  </Card>
</template>

<script>
import {getReportData} from '../../api/attendance'

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      selectRecords: [],
      tableColumn: [],
      searchForm: {
        month: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAttendanceReportData()
    },
    getAttendanceReportData() {
      this.loading = true
      getReportData(this.searchForm).then(res => {
        this.tableColumn = res.data.column
        this.tableData = res.data.returnData
        this.loading = false
      })
    },
    exportDataEvent() {
      this.$refs.xTable1.exportData({type: 'csv'})
    },
    rowStyle({row, rowIndex}) {
      if (row.line === '') {
        return {
          backgroundColor: '#dcdee2',
          color: '#606266'
        }
      }
    },
    handleReset() {
      this.searchForm = {
        month: ''
      }
      this.tableData = []
      this.tableColumn = []
      this.getAttendanceReportData()
    }
  }
}
</script>
